<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>五一放假倒计时</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.min.js"></script>
</head>
<body>
<div id="countdown1">
    <p>下班还有：</p>
    <div class="countdown-item">
        <span class="countdown-value" id="countdown1-days"></span>
        <span class="countdown-label"> 天</span>
        <span class="countdown-value" id="countdown1-hours"></span>
        <span class="countdown-label"> 小时</span>
        <span class="countdown-value" id="countdown1-minutes"></span>
        <span class="countdown-label"> 分钟</span>
        <span class="countdown-value" id="countdown1-seconds"></span>
        <span class="countdown-label"> 秒</span>
    </div>
</div>
<div id="countdown">
    <p>五一放假还有：</p>
    <div class="countdown-item">
        <span class="countdown-value" id="countdown-days"></span>
        <span class="countdown-label"> 天</span>
        <span class="countdown-value" id="countdown-hours"></span>
        <span class="countdown-label"> 小时</span>
        <span class="countdown-value" id="countdown-minutes"></span>
        <span class="countdown-label"> 分钟</span>
        <span class="countdown-value" id="countdown-seconds"></span>
        <span class="countdown-label"> 秒</span>
    </div>
</div>
</body>
<script>
    // 目标日期
    var targetDate = new Date("2023-04-28 23:59:59");

    // 定时器函数
    var countdown = setInterval(function() {
        // 当前日期
        var currentDate = new Date();

        // 计算剩余时间（单位为秒）
        var remainingTime = Math.floor((targetDate - currentDate) / 1000);

        // 如果时间已经过期，则清除定时器并显示提示信息
        if (remainingTime < 0) {
            clearInterval(countdown);
            $("#countdown").html("时间已过期！");
        } else {
            // 计算剩余天数、小时数、分钟数和秒数
            var days = Math.floor(remainingTime / 86400);
            var hours = Math.floor((remainingTime % 86400) / 3600);
            var minutes = Math.floor((remainingTime % 3600) / 60);
            var seconds = remainingTime % 60;

            // 显示剩余时间并添加数字滚动特效
            $("#countdown-days").text(days);
            $("#countdown-hours").text(hours);
            $("#countdown-minutes").text(minutes);
            $("#countdown-seconds").text(seconds);
        }
    }, 1000);
</script>
<script>
    // 目标日期
    var targetDate1 = new Date();
    targetDate1.setHours(18)
    targetDate1.setMinutes(0);
    targetDate1.setSeconds(0);

    // 定时器函数
    var countdown1 = setInterval(function() {
        // 当前日期
        var currentDate = new Date();

        // 计算剩余时间（单位为秒）
        var remainingTime = Math.floor((targetDate1 - currentDate) / 1000);

        // 如果时间已经过期，则清除定时器并显示提示信息
        if (remainingTime < 0) {
            clearInterval(countdown1);
            $("#countdown1").html("时间已过期！");
        } else {
            // 计算剩余天数、小时数、分钟数和秒数
            var days = Math.floor(remainingTime / 86400);
            var hours = Math.floor((remainingTime % 86400) / 3600);
            var minutes = Math.floor((remainingTime % 3600) / 60);
            var seconds = remainingTime % 60;

            // 显示剩余时间并添加数字滚动特效
            $("#countdown1-days").text(days);
            $("#countdown1-hours").text(hours);
            $("#countdown1-minutes").text(minutes);
            $("#countdown1-seconds").text(seconds);
        }
    }, 1000);
</script>
</html>
